<template>
  <section class="p-10 outbox">
      <span>线别：</span>
    <el-select v-model="value" placeholder="请选择或输入" filterable :filter-method="dataFilter" @change="ChangeSite">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </section>
</template>
<script>
// 引入axios,方便请求数据
// import axios from 'axios'
  export default {
    name: 'SiteSelector',
    data() {
      return {
        optionsCopy: [{
          value: '1',
          label: 'line1',
          label_num: [{
            id: '1',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '2',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '3',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '4',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '5',
            line_num: 'line001',
            segment_num: 'seg001'
          }],
        }, {
          value: '2',
          label: 'Line2',
           label_num: [{
             id: '1',
            line_num: 'line002',
            segment_num: 'seg002'
          },{
            id: '2',
            line_num: 'line002',
            segment_num: 'seg002'
          },{
            id: '3',
            line_num: 'line002',
            segment_num: 'seg002'
          },{
            id: '4',
            line_num: 'line002',
            segment_num: 'seg002'
          },{
            id: '5',
            line_num: 'line002',
            segment_num: 'seg002'
          }],
        }, {
          value: '3',
          label: 'food',
           label_num: [{
            id: '1',
            line_num: 'line003',
            segment_num: 'seg003'
          },{
            id: '2',
            line_num: 'line003',
            segment_num: 'seg003'
          },{
            id: '3',
            line_num: 'line003',
            segment_num: 'seg003'
          },{
            id: '4',
            line_num: 'line003',
            segment_num: 'seg003'
          },{
            id: '5',
            line_num: 'line003',
            segment_num: 'seg003'
          }],
        }, {
          value: '4',
          label: 'sss',
           label_num: [{
             id: '1',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '2',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '3',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '4',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '5',
            line_num: 'line001',
            segment_num: 'seg001'
          }],
        },{
          value: '7',
          label: 'fdds',
           label_num: [{
             id: '1',
            line_num: 'line007',
            segment_num: 'seg007'
          },{
            id: '2',
            line_num: 'line007',
            segment_num: 'seg007'
          },{
            id: '3',
            line_num: 'line007',
            segment_num: 'seg007'
          },{
            id: '4',
            line_num: 'line007',
            segment_num: 'seg007'
          },{
            id: '5',
            line_num: 'line007',
            segment_num: 'seg007'
          }],
        }],
        options: [{
          value: '1',
          label: 'line1',
           label_num: [{
             id: '1',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '2',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '3',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '4',
            line_num: 'line001',
            segment_num: 'seg001'
          },{
            id: '5',
            line_num: 'line001',
            segment_num: 'seg001'
          }],
        }, {
          value: '2',
          label: 'Line2',
           label_num: [{
            id: '1',
            line_num: 'line002',
            segment_num: 'seg002'
          },{
            id: '2',
            line_num: 'line002',
            segment_num: 'seg002'
          },{
            id: '3',
            line_num: 'line002',
            segment_num: 'seg002'
          },{
            id: '4',
            line_num: 'line002',
            segment_num: 'seg002'
          },{
            id: '5',
            line_num: 'line002',
            segment_num: 'seg002'
          }],
        }, {
          value: '3',
          label: 'food',
           label_num: [{
            id: '1',
            line_num: 'line003',
            segment_num: 'seg003'
          },{
            id: '2',
            line_num: 'line003',
            segment_num: 'seg003'
          },{
            id: '3',
            line_num: 'line003',
            segment_num: 'seg003'
          },{
            id: '4',
            line_num: 'line003',
            segment_num: 'seg003'
          },{
            id: '5',
            line_num: 'line003',
            segment_num: 'seg003'
          }],
        }, {
          value: '4',
          label: 'sss',
           label_num: [{
            id: '1',
            line_num: 'line004',
            segment_num: 'seg004'
          },{
            id: '2',
            line_num: 'line004',
            segment_num: 'seg004'
          },{
            id: '3',
            line_num: 'line004',
            segment_num: 'seg004'
          },{
            id: '4',
            line_num: 'line004',
            segment_num: 'seg004'
          },{
            id: '5',
            line_num: 'line004',
            segment_num: 'seg004'
          }]
        }],
        value: ''
      };
    },
    methods: {
      dataFilter(val) {
        this.value = val;
        if (val) { //val存在
          this.options = this.optionsCopy.filter((item) => {
            if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) {
              return true
            }
          })
        } else { //val为空时，还原数组
          this.options = this.optionsCopy;
        }
      },
      ChangeSite (val) {
        let this_ = this
        this_.optionsCopy.forEach((item) => {
            if(item.value === `${val}`){
              this_.$emit('ChangeSL',item.label_num)
            }
        })
      }
    },
    mounted () {
        //let res=window.contact.GetAjax(this.url);
    }
  };
</script>

<style scoped>
    .outbox{
      position: relative;
      width: 100%;
      margin: 0 auto;
    }
    span{
        display: inline-block;
        color: #333;
        margin-left: 16px;
        margin-right: 6px;
        font-size: 1rem;
        font-weight: 400;
        width: 88px;
        position: absolute;
        top: 26px;
        left: 0px;
        text-align: center;
        margin-left: 10px;
    }
    section{
        width: 100%;
        margin: 0 auto;
        padding-left: 88px;
        box-sizing: border-box;
    }
    .el-select{
        margin: 0 auto;
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
    }
</style>